<template>
  <el-container class="login-container">
    <el-row>
      <el-col :span="16">
        <div class="title">
          <p><span class="h2">知识改变命运</span></p>
          <p><span class="h3">用阅读去丈量世界</span></p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="login-div">
          <el-form :model="user" label-width="auto" style="max-width: 600px">
            <el-form-item>
              <el-input class="form-input" :suffix-icon="User" placeholder="请输入用户名" v-model="user.username"  />
            </el-form-item>
            <el-form-item>
              <el-input class="form-input" v-model="user.password" placeholder="请输入密码" show-password  />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="btn_login">确定</el-button>
              <el-button type="primary">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import {User} from '@element-plus/icons-vue'
import http from '../axios'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';


const router = useRouter();

const user = ref({})

const btn_login = ()=>{
    http.post('/user/logon',user.value).then(resp=>{
        if(resp.data.code != '200'){
            ElMessage.error(resp.data.message);
            return;
        }
        ElMessage.success(resp.data.message);
        localStorage.setItem('token',resp.data.data.token);
        localStorage.setItem('username',resp.data.data.username);
        router.replace(`${resp.data.data.path}`)
    })
}
</script>

<style>
.form-input{
    height: 40px;
}
.el-row {
  width: 100%;
}
.login-container {
  width: 100%;
  height: 100vh;
  background: url(../assets/image/bg.webp) no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.login-div {
  width: 400px;
  height: 600px;
  background-color: green;
}

.title{
    color: #333;
}
.h2{
    font-size: 90px;
}

</style>
